<style lang="less">
    @import '../../../styles/common.less';
</style>

<template>
  <div style="position: relative">
      <Spin size="large" fix v-if="isLoading"></Spin>
      <Row>
        <Col span="24">
            <Card>
                <p slot="title">
                    字典列表
                </p>
                <Row>
                    <Col span="16">
                        <Input v-model="searchData.code" @on-keyup.enter="getData" placeholder="请输入code" style="width: 150px" />
                        <Button type="primary" shape="circle" icon="ios-search" @click="getData"></Button>
                    </Col>
                    <Col span="3" offset="5" v-if="$hasPerms('dict:save')">
                        <span style="margin: 0 10px;">
                            <Button type="primary" icon="plus" @click="handleAdd">新增字典</Button>
                        </span>
                    </Col>
                </Row>
                <br>
                <Row>
                    <tree-grid
                        :items="dicts"
                        :columns="columns"
                        @on-row-click="rowClick"
                    ></tree-grid>
                    <div style="margin: 10px;overflow: hidden">
                        <div style="float: right;">
                            <Page :total="total" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
                        </div>
                    </div>
                </Row>
            </Card>
        </Col>
      </Row>
      <Modal
            v-model="addModal"
            :title="modalTitle"
            :mask-closable="false">
        <Form ref="addForm" :model="addForm" label-position="top" :rules="rules">
            <FormItem label="父级字典" prop="pid" v-if="supDicts.length" required>
                <Select v-model="addForm.pid" @on-change="supDictChange">
                    <Option :value="0">一级字典</Option>
                    <Option v-for="item in supDicts" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>
            <FormItem label="值" prop="code" required>
                <Input type="text" v-model="addForm.code"></Input>
            </FormItem>
            <FormItem label="名称" prop="name" required>
                <Input type="text" v-model="addForm.name"></Input>
            </FormItem>
            <FormItem label="编号" prop="content" required>
                <InputNumber v-model="addForm.num"></InputNumber>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="text" @click="addModal = false">取消</Button>
            <Button type="primary" :loading="saveLoading" @click="addModalOk">保存</Button>
        </div>
      </Modal>
  </div>

</template>

<script>
import TreeGrid from '../../my-components/tree-table/tree-grid.vue';
export default {
    name: 'dict-index',
    components: {
        TreeGrid
    },
    data () {
        return {
            isLoading: true,
            saveLoading: false,
            searchData: {},
            // 表头
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '排序',
                    align: 'center',
                    key: 'num'
                },
                {
                    title: '名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '值',
                    align: 'center',
                    key: 'code'
                },
                {
                    title: '创建时间',
                    align: 'center',
                    key: 'createTime'
                },
                {
                    title: '操作',
                    type: 'action',
                    actions: [
                        {
                            type: 'primary',
                            key: 'edit',
                            text: '编辑'
                        },
                        {
                            type: 'error',
                            key: 'delete',
                            text: '删除'
                        }
                    ],
                    width: '80'
                }
            ],
            // 数据
            dicts: [],
            total: 0,
            currentPage: 1,
            supDicts: [],
            addModal: false,
            modalTitle: '',
            addForm: {
                id: 0,
                pid: 0,
                code: '',
                name: '',
                num: 0
            },
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                pid: [
                    { required: true, type: 'number', message: '请选择父级菜单', trigger: 'change' }
                ],
                num: [
                    { required: true, type: 'number', message: '请选输入编号', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入code', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        getData () {
            this.isLoading = true;
            this.$get('/dict/list?pageNum=' + this.currentPage, this.searchData)
                .then(res => {
                    this.dicts = res.records;
                    this.total = res.total;
                    this.currentPage = res.current;
                    this.isLoading = false;
                    this.isShow = true;
                })
                .catch(error => {
                    this.isLoading = false;
                    this.$Message.error(error.message);
                });
        },
        supDictChange (id) {
            console.log(id);
            this.addForm.code = this.getSupDictById(id).code;
        },
        rowClick (data, key, index, tetx) {
            if (key === 'edit') {
                this.handleEdit(data);
            }
            if (key === 'delete') {
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>您确定要删除这条数据吗？</p>',
                    onOk: () => {
                        this.handleDelete(data);
                    }
                });
            }
        },
        handleEditChange (content) {
            this.addForm.content = content;
        },
        getSupDicts () {
            this.$get('/dict/select')
                .then(res => {
                    this.supDicts = res;
                    this.addModal = true;
                })
                .catch(error => {
                    this.$Message.error(error.message);
                });
        },
        getSupDictById (id) {
            const dicts = this.supDicts;
            let i = 0;
            for (i; i < dicts.length; i++) {
                if (dicts[i].id === id) {
                    return dicts[i];
                }
            }
        },
        handleAdd () {
            this.addForm.id = 0;
            this.addForm.pid = 0;
            this.addForm.code = '';
            this.addForm.name = '';
            this.modalTitle = '新增字典';
            this.getSupDicts();
        },
        addModalOk () {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let url = '/dict/update';
                    if (this.addForm.id === 0) {
                        this.addForm.id = null;
                        url = '/dict/save';
                    }
                    this.saveLoading = true;
                    this.$post(url, this.addForm, 'json')
                        .then(res => {
                            this.getData();
                            this.$Message.success('操作成功');
                            this.addModal = false;
                            this.saveLoading = false;
                        })
                        .catch(error => {
                            this.saveLoading = false;
                            this.$Message.error(error.message);
                        });
                }
            });
        },
        handleEdit (val) {
            this.modalTitle = '编辑字典';
            this.addForm.id = val.id;
            this.addForm.pid = val.pid;
            this.addForm.code = val.code;
            this.addForm.name = val.name;
            this.addForm.num = val.num;
            this.getSupDicts();
        },
        handleDelete (val) {
            // 删除
            this.$get('/dict/delete/' + val.id
            ).then(res => {
                this.$Message.success('删除了' + val.name);
                this.getData();
            }).catch(error => {
                this.$Message.error(error.message);
            });
        },
        changePage (page) {
            this.currentPage = page;
            this.getData();
        }
    },
    created () {
        this.getData();
    }
};
</script>
